<!DOCTYPE html>
<html lang="zh-cN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScipt库</title>
    <script src="https://lib.baomitu.com/lodash.js/latest/lodash.js"></script>
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <h1>Lodash示例</h1>
    <p class="msg"></p>
    <p>
        <button id="throttle">节流(throttle)</button>
        <button id="debounce">防抖(debounce)</button>
    </p>
    <p class="throttle"></p>
    <p class="debounce"></p>
    <script>
      document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");

            let objects = [{ a : 1 },{ b : 2}];
            //浅拷贝
            let shallow = _.clone(objects);
            msg.innerHTML += `浅拷贝: ${shallow[0] === objects[0]}<br>`;
            //深度拷贝
            let deep = _.cloneDeep(objects);
            msg.innerHTML += `深度拷贝: ${deep[0] === objects[0]}<br>`;

            let obJArr = [{n: 4},{n: 2},{n: 8},{n: 6}];
            msg.innerHTML += `按指定迭代求平均值${_.meanBy(
                obJArr,
                (o) => o.n
            )}<br>`;
            msg.innerHTML += `按指定属性求平均值${_.meanBy(obJArr,"n")}<br>`;

            let users = [
                {"user": "fred","age": 48},
                {"user": "barnehy","age": 36},
                {"user": "angle","age": 40},
                {"user": "smile","age": 34},
            ];

            console.log(_.sortBy(users, o=>o.user));
            console.log(_.sortBy(users, ["user","age"]));

            //节流
            let throttle = document.querySelector(".throttle");
            document.getElementById("throttle").addEventListener(
                "click",
                _.throttle(function () {
                    console.log("throttle");
                    throttle.innerHTML += `${new Date().toLocaleString()}<br>`;
                },5000)
            );

            //防抖
            let debounce = document.querySelector(".debounce");
            document.getElementById("debounce").addEventListener(
                "click",
                _.debounce(function () {
                    console.log("debounce");
                    debounce.innerHTML += `${new Date().toLocaleString()}<br>`;
                },5000)
            );
        });
    </script>
</body>
</html>